import { Layout, Menu } from 'antd';
import { useRouter } from 'next/router';
const { Content, Sider } = Layout;

const MenuItems = [
  { key: '/', label: '首页' },
  { key: '/docs', label: '文档' },
  { key: '/clock', label: '产品中心' },
  { key: '/dnd-sort', label: '拖拽' },
  { key: '/flow', label: 'react-flow' },
  { key: '/blogs', label: '博客' },
];
const AppLayout = ({ children }) => {
  const router = useRouter();
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider
        collapsible
        style={{
          overflow: 'auto',
          height: '100vh',
          position: 'sticky',
          insetInlineStart: 0,
          top: 0,
          bottom: 0,
          scrollbarWidth: 'thin',
          scrollbarGutter: 'stable',
        }}
      >
        <div className="logo" />
        <Menu
          theme="dark"
          selectedKeys={[router.pathname]}
          mode="inline"
          items={MenuItems}
          onClick={({ key }) => router.push(key)}
        />
      </Sider>
      <Layout>
        {/* <Header style={{ padding: 0 }} /> */}
        <Content style={{ margin: '1rem', backgroundColor: '#f9f5f0' }}>{children}</Content>
      </Layout>
    </Layout>
  );
};

export default AppLayout;
